<template>
  <div class="page-wrap">
    <div class="content">
      <div class="title">
        <h3 style="margin-bottom: 10px">项目监控</h3>
        <!--<el-date-picker-->
        <!--  v-model="searchDate"-->
        <!--  type="daterange"-->
        <!--  range-separator="-"-->
        <!--  start-placeholder="开始时间"-->
        <!--  end-placeholder="结束时间"-->
        <!--  value-format="YYYY-MM-DD"-->
        <!--  :clearable="false"-->
        <!--  style="flex: unset; width: 320px"-->
        <!--  @change="onSearch"-->
        <!--/>-->
      </div>
      <div class="box">
        <div id="pieChart" class="chart-box"></div>
        <div id="lineChart" class="chart-box"></div>
        <div id="ringChart" class="chart-box"></div>
      </div>
      <section>
        <div class="title">
          <h4 style="margin-bottom: 10px">项目分布</h4>
        </div>
        <div id="barChart" class="chart-box"></div>
      </section>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';

const searchDate = ref(['', '']);

onMounted(() => {
  onSearch();
});

/**
 * 搜索
 * */
const onSearch = () => {
  window.$api.demo
    .projectTypeCreate({
      startTime: searchDate.value[0],
      endTime: searchDate.value[1],
    })
    .then((res) => {
      rawBarLine(res.data, '', 'barChart', 'bar');
      rawBarLine(res.data, '项目分布', 'lineChart', 'line');
    });

  window.$api.demo
    .projectGroup({
      startTime: searchDate.value[0],
      endTime: searchDate.value[1],
    })
    .then((res) => {
      rawPie(res.data, '项目类别分布', 'pieChart', '50%');
      rawPie(res.data, '项目生命周期', 'ringChart', ['40%', '50%']);
    });
};
/**
 * 渲染柱状图、折线图
 * @rawData {array} 柱子、折线的数据
 * @title {string} 标题
 * @dom {string} 渲染区域
 * @type {string} 渲染类型
 * */
const rawBarLine = (rawData, title, dom, type) => {
  const legend = rawData.series.map((v) => v.legend);
  const barChart = echarts.init(document.getElementById(dom));
  barChart.clear();
  barChart.setOption({
    title: {
      text: title,
      left: 'center',
    },
    //hover上去显示柱子的数据
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(0,0,0,.1)', //hover时shadow的背景色
        },
      },
    },
    legend: {
      data: legend,
      top: '30px',
      itemWidth: 16,
      itemHeight: 10,
    },
    grid: {
      top: 70,
      bottom: 30,
      left: '5%',
      right: 10,
    },
    yAxis: {
      name: '',
    },
    xAxis: {
      axisLabel: {
        fontSize: 12,
        fontWeight: 'bold',
      },
      data: rawData.xAxis,
    },
    // dataZoom: [
    //   {
    //     type: 'inside',
    //   },
    //   {
    //     type: 'slider',
    //   },
    // ],
    series: rawData.series.map((item) => {
      return {
        name: item.legend,
        type,
        barWidth: 22, //柱子宽度
        itemStyle: {
          //柱状图显示数据
          normal: {
            label: {
              show: true, //是否显式的显示数据值，默认false
              position: 'top', //数据值显示的位置
            },
          },
        },
        data: item.data,
      };
    }),
  });
  barChart.resize();
};
/**
 * 渲染饼状图
 * @rawData {array} 饼图的数据
 * @title {string} 标题
 * @dom {string} 渲染区域
 * @radius {string/array} 渲染方式
 * */
const rawPie = (rawData, title, dom, radius) => {
  const legend = rawData.map((item) => item.name);
  const pieChart = echarts.init(document.getElementById(dom));
  pieChart.clear();
  pieChart.setOption({
    title: {
      text: title,
      left: 'center',
    },
    //hover上去显示的数据
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)',
    },
    legend: {
      data: legend,
      top: '30px',
      itemWidth: 16,
      itemHeight: 10,
    },
    series: [
      {
        type: 'pie',
        radius,
        label: {
          normal: {
            /*信息框提示内容及样式*/
            formatter: ' {b|{b}} \n  {d}%  ', //提示框显示的内容
            rich: {
              per: {
                color: '#eee',
                backgroundColor: '#334455',
                padding: [2, 4],
                borderRadius: 2,
              },
            },
          },
        },
        data: rawData.map((item) => {
          return {
            value: item.value,
            name: item.name,
          };
        }),
      },
    ],
  });
  pieChart.resize();
};
</script>

<style scoped>
.content {
  padding: 20px;
}
.box {
  display: flex;
}

.box .chart-box {
  position: relative;
  flex: 1;
  height: 550px;
  margin: 14px auto 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
#lineChart {
  margin: 14px 14px 0 14px;
}
section {
  height: 650px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.title {
  display: flex;
  justify-content: space-between;
}
#barChart {
  height: 600px;
}
</style>
